<template>
  <div class="banner">
    <div class="logo" :class="this.$store.state.flag? 'logo1' : ''">
      <h2 contenteditable="true">{{this.$store.state.flag ? logobak : logo}}</h2>
    </div>
    <div class="rig">
		<i>
			<img src="../assets/全部.png" @click="edit()" />
		</i>
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo user" active-text-color="#FFFFFF" text-color="#FFFFFF" background-color="#1989FA" mode="horizontal">
      <el-submenu index="2">
        <template slot="title">{{user}}</template>
        <!-- <el-menu-item index="2-1">修改密码</el-menu-item> -->
        <el-menu-item index="2-2" @click="logout()">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'banner',
    data(){
      return {
        user: null,
        navFlag: true,
        logo: '彭泽公安局食堂管理系统',
        logobak: '彭',
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    created() {
      
      // 判断是移动端还是pc端
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        this.$store.commit('edit', true)
        this.navFlag = false
      } else {
        this.$store.commit('edit', false)
      }
    },
    methods:{
      // 点击伸缩导航栏
      edit() {
        if(this.navFlag){
          this.$store.commit('edit',true)
          this.navFlag = false
        }else{
          this.$store.commit('edit',false)
          this.navFlag = true
        }
      },
      logout(){
        // 退出登录
        // localStorage.removeItem("userToken")
        // localStorage.removeItem("NavBanner")
        // this.$cookie.remove('username');
        this.$router.push('/login')
      }
    }
  }
</script>

<style scoped="scoped">
  @import url("../css/nav.css");

  .logo h2 {
    font-size: 16px;
  }
  .qrs {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 999999;
    right: 100px;
    top: 10px;
    cursor: pointer;
  }
  .qrs img {
    width: 100%;
    height: 100%;
  }
  .qrs img:hover + .mhqr {
    display: inline-block;
  }
  .mhqr {
    position: absolute;
    left: -60px;
    top: 80px;
    display: none;
  }
  .mhqr:hover {
    display: inline-block;
  }
</style>
